<template>
  <div class="app-container">
    <el-card>
      <!--查询表单-->
      <el-form
        ref="seachQuery"
        size="small"
        :model="queryParam"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-autocomplete
            class="inline-input"
            v-model="queryParam.name"
            :fetch-suggestions="querySearch"
            placeholder="讲师名"
            :trigger-on-focus="false"
            style="width:100px"
            value-key="name"
            clearable
          ></el-autocomplete>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="queryParam.level"
            clearable
            size="small"
            style="width:100px"
            placeholder="讲师头衔"
          >
            <el-option
              :value="1"
              label="高级讲师"
            />
            <el-option
              :value="2"
              label="首席讲师"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="入驻时间">
          <el-date-picker
            v-model="queryParam.joinDateBegin"
            type="date"
            size="small"
            style="width:180px"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="queryParam.joinDateEnd"
            type="date"
            size="small"
            style="width:180px"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="onSubmit"
          >查询</el-button>
          <el-button
            type="default"
            icon="el-icon-delete"
            size="small"
            @click="resetForm('seachQuery')"
          >清空</el-button>
          <el-button
            type="success"
            size="small"
            icon="el-icon-plus"
            @click.native="handleAdd"
          >新增</el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="batchDelete"
          >删除</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="dataSource"
        element-loading-text="数据加载中"
        border
        fit
        highlight-current-row
        @row-dblclick="(row, column, event) => handleInfo(row)"
        @selection-change="handleSelectChange"
        :height="tableHeight"
      >

        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>

        <el-table-column
          label="序号"
          width="70"
          align="center"
          type="index"
          :index="indexMethod"
        />

        <el-table-column
          prop="name"
          label="名称"
          align="center"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="头衔"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-tag
              type="success"
              v-if="scope.row.level === 1"
            >高级讲师</el-tag>
            <el-tag v-if="scope.row.level === 2">首席讲师</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="intro"
          label="资历"
          align="center"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="joinDate"
          label="添加时间"
          align="center"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="sort"
          label="排序"
          width="60"
          align="center"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="操作"
          prop="operator"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click.native="handleEdit(scope.row,true)"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParam.current"
        :page-sizes="pageParam.pageSizes"
        :page-size="pageParam.size"
        style="padding: 30px 0 0 0;"
        align="center"
        :layout="pageParam.layout"
        :total="pageParam.total"
      />

    </el-card>

    <!-- cur框 -->
    <template>
      <model-dialog
        ref="modelDialog"
        @ok="modalFormOk"
      >
        <template
          slot="dialog-content"
          slot-scope="tableInfoData"
        >
          <!-- 这里是slot 绑定的数据 包含列表数据 是否显示按钮 -->
          <teacher-model
            ref="modelContent"
            :table-info-data="tableInfoData"
          />
        </template>
      </model-dialog>
    </template>

  </div>
</template>

<script>
import { TeacherApi } from '@/api/edu/url-teacher'
import { OneTableListMixins } from '@/mixins/OneTableListMixins'
import ModelDialog from '../../components/common/ModelDialog'
import TeacherModel from './model/teacherModel'
import { getAction } from '@/api/manage'
export default {
  components: { ModelDialog, TeacherModel },
  mixins: [OneTableListMixins],
  name: 'TeacherList',
  data() {
    return {
      url: {
        list: TeacherApi.list,
        delete: TeacherApi.delete,
        edit: TeacherApi.edit,
        queryById: TeacherApi.queryById,
        save: TeacherApi.save,
        batchDelete: TeacherApi.batchDelete,
        selectNameListByKey: TeacherApi.selectNameListByKey
      },
      queryParam: {
        joinDateBegin: '',
        joinDateEnd: ''
      },
      moduleName: '讲师信息',
    }
  },
  watch: {
    "queryParam.joinDateBegin": function (val) {
      if (this.queryParam.joinDateEnd && val > this.queryParam.joinDateEnd) {
        this.$message.warning('开始时间不能大于截止时间')
        this.queryParam.joinDateBegin = ''
      }
    },
    "queryParam.joinDateEnd": function (val) {
      if (this.queryParam.joinDateBegin && val < this.queryParam.joinDateBegin) {
        this.$message.warning('截止时间不能小于开始时间')
        this.queryParam.joinDateEnd = ''
      }
    },
  },
  methods: {
    // 输入建议
    querySearch(key, callback) {
      getAction(this.url.selectNameListByKey, { key: key }).then(res => {
        callback(res.data.nameList)
      })
    }
  }
}
</script>
<style>
</style>